<template>
  <div>
    <!-- 查看弹窗 -->
    <div class="s_shadow" v-if="showFlag">
      <div class="s_shadow_a">
        <h3 class="list1_title title_b">
          <img src="@/assets/images/shu_03.jpg" alt />
          <span class="title_text">项目公司人员实名制详情</span>
          <img
            class="closeshadow closeshadow1"
            @click="close1"
            src="@/assets/images/fill-closed.png"
            alt
          />
        </h3>
        <div class="inputBox">
          <div class="lable_a">姓名:</div>
          <el-input v-model="rowData.name" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">性别:</div>
          <el-input v-model="rowData.sex" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">年龄:</div>
          <el-input v-model="rowData.age" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">身份证号:</div>
          <el-input v-model="rowData.cardNum" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">手机号码:</div>
          <el-input v-model="rowData.phoneNum" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">单位名称:</div>
          <el-input v-model="rowData.unitName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">职位名称:</div>
          <el-input v-model="rowData.positionName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">紧急联系人姓名:</div>
          <el-input v-model="rowData.contactName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">紧急联系人电话:</div>
          <el-input v-model="rowData.contactTel" readonly="true"></el-input>
        </div>

        <div class="inputBox">
          <div class="lable_a">创建时间:</div>
          <el-input v-model="rowData.createTime" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">修改人:</div>
          <el-input v-model="rowData.upUserName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">修改时间:</div>
          <el-input v-model="rowData.updateTime" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">所属父项目:</div>
          <el-input v-model="rowData.parentProjectName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">所属子项目:</div>
          <el-input v-model="rowData.subProjName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">所在地:</div>
          <el-input v-model="rowData.townName" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">项目公司负责人:</div>
          <el-input v-model="rowData.projHead" readonly="true"></el-input>
        </div>
        <div class="inputBox">
          <div class="lable_a">建设单位负责人:</div>
          <el-input v-model="rowData.constructionHead" readonly="true"></el-input>
        </div>
      </div>
    </div>

    <!-- 列表详情 -->
    <h3 class="list1_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span class="title_text">项目公司人员实名制详情</span>
    </h3>
    <div class="find_a">
      <div class="findbtn" @click="findList">查询</div>
      <!-- <div class="name">
        <span>&nbsp; &nbsp;查询:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-input v-model="name" placeholder="姓名"></el-input>
      </div>
      <!-- <div class="name">
        <span>身份证号:</span>
      </div>-->
      <div class="name_input">
        <el-input maxlength="18" v-model="cardNum" placeholder="身份证号"></el-input>
      </div>
      <!-- <div class="name">
        <span>手机号码:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-input maxlength="11" v-model="phone" placeholder="手机号码"></el-input>
      </div>
      <!-- <div class="name">
        <span>单位名称:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-input v-model="unitName" placeholder="单位名称"></el-input>
      </div>
      <!-- <div class="name">
        <span>创建时间:</span>
      </div>-->
      <div class="name_input">
        <el-date-picker
          v-model="Time"
          type="daterange"
          range-separator="至"
          start-placeholder="创建日期"
          end-placeholder="创建日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
    </div>

    <div class="table_content">
      <el-table
        :header-cell-style="{ fontWeight: 500 }"
        :data="tableData"
        stripe
        style="width: 100%;"
        @row-click="rowinfo"
      >
        <!-- <el-table-column align="center" type="index" label="序号" width="90"></el-table-column> -->
        <el-table-column align="center" prop="name" label="姓名" width="90"></el-table-column>
        <el-table-column align="center" prop="sex" label="性别" width="90"></el-table-column>
        <el-table-column align="center" prop="age" label="年龄" width="70"></el-table-column>
        <el-table-column align="center" prop="cardNum" label="身份证号" min-width="180"></el-table-column>
        <el-table-column align="center" prop="phoneNum" label="联系方式" min-width="120"></el-table-column>
        <el-table-column align="center" prop="unitName" label="单位名称" min-width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="Position_ID" label="职位ID" width="90"></el-table-column> -->
        <el-table-column align="center" prop="contactName" label="紧急联系人姓名" min-width="150"></el-table-column>
        <el-table-column align="center" prop="contactTel" label="紧急联系人电话" min-width="150"></el-table-column>
        <!-- <el-table-column align="center" prop="createUserId" label="填报人" width="90"></el-table-column> -->
        <el-table-column align="center" prop="createTime" label="创建时间" width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="upUserId" label="修改人" width="90"></el-table-column> -->
        <el-table-column align="center" label="操作" width="90">
          <template>
            <img @click="showInfo" src="@/assets/images/fill-view.png" />
            <!-- <img @click="update" src="@/assets/images/edit.png" />
            <img src="@/assets/images/remove.png" />-->
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" style="float:right;position: relative;right: 0;top: 5px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/epidemicrisk/list1.scss";
</style>

<style lang="scss">
.find_a {
  line-height: 35px;
  .el-input__inner {
    height: 35px !important;
    padding: 0 10px;
  }
}
</style>
<script>
import { porjectper } from "@/service/epidemicrisk/index.js";
export default {
  data() {
    return {
      //查询条件
      name: "",
      cardNum: "", //身份证号
      Time: [], //创建时间
      unitName: "", //单位名称
      phone: "",
      findinput: "",
      end: "",
      start: "",

      showFlag: false,
      showFlag1: false,

      currentPage: 1,
      total: 0,
      rowData: {},
      //当前页

      tableData: []
    };
  },
  created() {
    var currentPage = this.currentPage;
    var pageSize = 10;
    var userId = window.sessionStorage.getItem("id");
    var name = this.name;
    var cardNum = this.cardNum;
    var unitName = this.unitName;
    var phoneNum = this.phone;
    var end = "";
    var start = "";
    var params = {
      currentPage: currentPage,
      pageSize: pageSize
    };
    porjectper(
      params,
      userId,
      cardNum,
      unitName,
      phoneNum,
      end,
      start,
      name
    ).then(res => {
      // window.console.log(res.data.msg);
      this.total = res.data.obj.total;
      this.tableData = res.data.obj.rows;
    });
  },

  methods: {
    findList() {
      if (this.Time === null) {
        this.start = "";
        this.end = "";
        var start = this.start;
        var end = this.end;
      } else if (this.Time.length == false) {
        this.start = "";
        this.end = "";
        start = this.start;
        end = this.end;
      } else {
        this.start = this.Time[0];
        this.end = this.Time[1];
        start = this.start;
        end = this.end;
        if (start == end) {
          this.$message({
            message: "查询起止日期不能相等",
            type: "error"
          });
          return false;
        }
      }

      var currentPage = 1;
      var pageSize = 10;
      var userId = window.sessionStorage.getItem("id");
      var name = this.name;
      var cardNum = this.cardNum;
      var unitName = this.unitName;
      var phoneNum = this.phone;

      var params = {
        currentPage: currentPage,
        pageSize: pageSize
      };

      porjectper(
        params,
        userId,
        cardNum,
        unitName,
        phoneNum,
        end,
        start,
        name
      ).then(res => {
        // window.console.log(res.data.msg);
        this.total = res.data.obj.total;
        this.tableData = res.data.obj.rows;
      });
    },
    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      if (this.Time === null) {
        this.start = "";
        this.end = "";
        var start = this.start;
        var end = this.end;
      } else if (this.Time.length == false) {
        this.start = "";
        this.end = "";
        start = this.start;
        end = this.end;
      } else {
        this.start = this.Time[0];
        this.end = this.Time[1];
        start = this.start;
        end = this.end;
        if (start == end) {
          this.$message({
            message: "查询起止日期不能相等",
            type: "error"
          });
          return false;
        }
      }

      var currentPage = val;
      var pageSize = 10;
      var userId = window.sessionStorage.getItem("id");
      var name = this.name;
      var cardNum = this.cardNum;
      var unitName = this.unitName;
      var phoneNum = this.phone;

      var params = {
        currentPage: currentPage,
        pageSize: pageSize
      };

      porjectper(
        params,
        userId,
        cardNum,
        unitName,
        phoneNum,
        end,
        start,
        name
      ).then(res => {
        // window.console.log(res.data.msg);
        this.total = res.data.obj.total;
        this.tableData = res.data.obj.rows;
      });
    },
    //获取当前行信息
    rowinfo(row) {
      window.console.log(row);
      this.rowData = row;
    },

    // 打开弹窗
    showInfo() {
      this.showFlag = true;
    },
    update() {
      this.showFlag1 = true;
    },
    //关闭弹窗
    close1() {
      this.showFlag = false;
      this.showFlag1 = false;
    }
  }
};
</script>
